<template>
	<!-- 秒杀 -->
	<view>

		<view class="swapper-class">
			<!-- 轮播图-->
			<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="4000" duration="400" style="height:100%;bottom:2.5%; width:96%;position: relative;left:2%;">
				<swiper-item style="border-radius: 5px;" v-for="(item,index) in 2" :key="index">
					<image :src="'../../static/bj.png'" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 导航栏秒杀 -->
		<view class="dhl-class">
			<img src="	https://java.crmeb.net/static/images/priceTag.png">
			<view class="left">
				<view class="ms-wz">{{time}}</view>
				<view class="ing-time">进行中</view>
			</view>
			<view class="right-wz">
				每日秒杀
			</view>
		</view>
		<view style="position: absolute; margin-top: 20px;width: 100%;">

			<!-- 秒杀商品 -->
			<view class="ms-shop" v-for="item in spikes">
				<img draggable="true"
					src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.beneficiation-machine.com%2Fwp-content%2Fuploads%2F2021%2F09%2F1631599744-921fac917bb5e86.jpg&refer=http%3A%2F%2Fwww.beneficiation-machine.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643641213&t=6f32e658ada2bb7f10f64153c179ed3a">
				<view class="right-shop">
					<view class="spane-bt-shop">{{item.spName}}</view>
					<!-- 价格-->
					<view class="prce-shop">
						<text class="ms-daz-price">￥{{item.spPriceSpike}}</text>
						<text class="ms-daz-q-price">${{item.spSellingPrice}}</text>
					</view>
					<!-- 限购数 -->
					<view class="xianliang-class">
						限量{{item.spSpikeCks}}件
					</view>
					<button class="butoon-class" @click="item.bfl!=100?spikeSave(item.spId):''"
						:style="`${item.bfl==100?'opacity: 0.6;cursor: not-allowed;':''}`">抢入</button>
					<view class="cu-progress round margin-top" style="height: 8 px;
				width: 255rpx;">
						<view class="bg-blue"
							:style="`text-align: center;;color:black;height: 20rpx;width:${item.bfl}%;`">
							<span style="position: relative;left: 40%;width: 100%;">{{item.bfl}}%</span>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: "15.00",
				url: this.$url + "/frontend",
				spikes: [],
				urId: sessionStorage.getItem("urId"),
			}
		},
		onShow() {
			this.list()
		},
		methods: {
			//获取数据
			list() {
				uni.request({
					url: `${this.url}/spike/list`,
					method: "GET",
					success: ({
						data
					}) => {
						if (data.code == 200) {
							//请求成功并且获取到了数据
							this.spikes = data.data.data

							for (var i = 0; i < this.spikes.length; i++) {
								if (this.spikes[i].spSpikeCks == this.spikes[i].spikeCount) {
									this.spikes[i].bfl = 0
								} else {
									this.spikes[i].bfl = parseFloat(100 - this.spikes[i]
										.spikeCount / this.spikes[i].spSpikeCks * 100).toFixed(0);
								}

							}
						}
					}
				})
			},
			spikeSave(spId) {
				uni.request({
					url: `${this.url}/spike/${spId}/${this.urId}`,
					method: "GET",
					success: ({
						data
					}) => {
						if (data.code == 200) {
							this.list()
							uni.showToast({
								title: data.message + "快去购物车支付把!"
							})
						} else {
							uni.showToast({
								title: data.message,
								icon: "error"
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.right-wz {
		position: absolute;
		right: 0;

		color: #007AFF;
		font-size: 10px;
		border-bottom: 1px solid #007AFF;
	}

	.butoon-class {
		position: absolute;
		width: 33%;
		right: 0;
		font-size: 10px;
		background-color: #007AFF;
		color: #FFFFFF;
		bottom: 0;

	}

	.xianliang-class {
		position: relative;
		color: #a1a1a1;
		top: 5px;
		font-size: 10px;
	}

	.ms-daz-q-price {
		position: relative;
		left: 5%;
		/* 给文字加一条横线 */
		text-decoration: line-through;
		color: #bababa;
	}

	.ms-daz-price {
		position: relative;
		color: #007AFF;
		font-size: 17px;
	}

	.prce-shop {
		position: relative;
		margin-top: 5px;
	}

	.spane-bt-shop {
		position: relative;
		width: 400rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.right-shop {
		position: absolute;
		right: 5%;
		top: 10%;
	}

	.ms-shop img {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		top: 30rpx;
		border-radius: 10px;
		left: 20rpx;
	}

	.ms-shop {
		position: relative;
		margin-top: 10px;
		width: 95%;
		margin-left: 2%;
		height: 260rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
	}

	.ms-wz {
		position: relative;
		color: #007AFF;
		font-weight: 700;
		font-size: 19px;
	}

	.ing-time {
		position: absolute;
		text-align: center;
		width: 20%;
		font-size: 10px;
		left: 10%;
		border-radius: 10px;
		color: #FFFFFF;
		background-color: #007AFF;
	}

	.left {
		position: relative;
		left: 7%;
	}

	.dhl-class img {
		position: relative;
		width: 13%;
		float: left;
	}

	.dhl-class {
		position: relative;
		width: 90%;
		margin-top: 20rpx;
		left: 2%;
	}

	.head {
		position: relative;
		width: 100%;
	}

	.swapper-class {
		position: relative;
		height: 200px;
	}
</style>
